{extend name="common/dialog" /}
{block name="css"}
{__block__}
<style>
.date{
    font-size: 12px; margin-left: 20px;
}
</style>
{/block}
{block name="content"}
<div class="layui-container">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th colspan="2" style="text-align: center">
                {$approval.name}
                <span id="approval_status" class="layui-badge"></span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th width="20%">合同名</th>
            <td>{$approval.contract.name}
                <button class="layui-btn layui-btn-xs" style="margin-left: 20px;" id="detail">查看合同详情</button></td>
        </tr>
        <tr>
            <th>合同编号</th>
            <td>{$approval.contract.contract_sn}</td>
        </tr>
        <tr>
            <th>合同类型</th>
            <td>{$approval.contract.type.name}</td>
        </tr>
        <tr>
            <th>合同编号</th>
            <td>{$approval.contract.contract_sn}</td>
        </tr>
        <tr>
            <th>客户名</th>
            <td>{$approval.contract.customer.name}<br>联系人：{$approval.contract.linkman.name} {$approval.contract.linkman.phone}</td>
        </tr>
        <tr>
            <th>合同负责人</th>
            <td>{$approval.contract.manager} {$approval.contract.department}</td>
        </tr>
        <tr>
            <th>签约日</th>
            <td id="contract_date">{$approval.contract.contract_date}</td>
        </tr>
        <tr>
            <th>到期日</th>
            <td id="due_date">{$approval.contract.due_date}</td>
        </tr>
        </tbody>
    </table>
    <fieldset class="layui-elem-field">
        <legend>审批流</legend>
        <div class="layui-field-box">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">{$approval.user.name} 发起申请 <span class="date">{$approval.create_time}</span></h3>

                        <p>
                            {$approval.note}
                        </p>
                    </div>
                </li>
                {volist name="approval.nodes" id="node"}
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h4 class="layui-timeline-title">
                            {$node.user.name}
                            {if $node.status == -1} 待审
                            {elseif $node.status == 0  /} 未审
                            {elseif $node.status == 1  /} 审核通过
                            {elseif $node.status == 2  /} 未通过
                            {/if}

                            {if $node.status >= 0}<span class="date">{$node.update_time}</span>{/if}
                        </h4>
                        <p>
                            {$node.note}
                        </p>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
    </fieldset>
</div>
{/block}

{block name="js"}
{__block__}
<script>
    layui.use(['table', 'util'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var util = layui.util;
        var approvalStatus = {
            0: "待审",
            1: "进行",
            2: "通过",
            3: "驳回",
            4: "已撤销"
        };
        $('#approval_status').html(approvalStatus[{$approval.status}])
        // 格式化日期
        var contractDate = util.toDateString({$approval.contract.contract_date} * 1000, 'yyyy-MM-dd');
        var dueDate = util.toDateString({$approval.contract.due_date} * 1000, 'yyyy-MM-dd');
        $('#contract_date').html(contractDate);
        $('#due_date').html(dueDate);

        // detail
        $('#detail').click(function () {
            layer.open({
                type: 2,
                title: '<span class="icon icon-contract"></span>  合同详情',
                area: ['500px', '600px'],
                content: '/contract/one/{$approval.contract.id}',
                btn: '确定',
                btnAlign: 'c'
            });
        })
    });
</script>
{/block}